<template>
    <div class="head-line">工资核算</div>
    <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 100%">
        <el-form-item label="打卡天数">
            <el-input v-model="form_datas.day" />
        </el-form-item>

        <el-form-item label="天工资">
            <el-input v-model="form_datas.daym" />
        </el-form-item>

        <el-form-item label="月度测试">
            <el-input v-model="form_datas.test" />
        </el-form-item>

        <el-form-item label="上级评价">
            <el-input v-model="form_datas.evaluation" />
        </el-form-item>

        <el-form-item label="互评比例">
            <el-input v-model="form_datas.proportion" />
        </el-form-item>

        <el-form-item label="结算工资">
            <el-input v-model="sums" />
        </el-form-item>
    </el-form>
    <div class="but-box">
        <el-button type="primary" size="default" @click="saveDatas">派发工资</el-button>
    </div>

</template>
<script>
    import { ref, reactive } from "vue";
    import axios from 'axios';

    import { ElMessage } from 'element-plus';


    export default {
        name: 'SupfilemdNav',
        setup() {

            let sums = ref();
            // 对象数据
            let form_datas = reactive({
                day: 30,
                test: 0,
                daym: 100,
                evaluation: 0,
                proportion: 0,
                sum: sums.value,
            })

            let labelPosition = ref('top');

            // 文章添加
            function saveDatas() {
                console.log("找到要派发工资的员工，派发工资");
                let datas = ref(Number(form_datas.day) * Number(form_datas.daym) + Number(form_datas.test) + Number(form_datas.evaluation) + Number(form_datas.proportion));
                console.log("data", datas.value);
                sums.value = datas.value
                ElMessage({
                    message: '找到要派发工资的员工，派发工资！',
                    type: 'success',
                })
            }

            return {
                labelPosition,
                form_datas,
                saveDatas,
                sums
            }
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .head-line {
        width: 100%;
        height: 50px;
        position: relative;
        line-height: 50px;
        /* border: 1px solid red; */
        font-weight: 600;
        background: #fff;
        padding-left: 20px;
        /* margin-bottom: 15px; */
    }

    .head-line::after {
        content: "";
        position: absolute;
        left: 0;
        top: 16px;
        margin-left: 10px;
        display: block;
        width: 3.5px;
        height: 18px;
        background: #51B37F;
        border-radius: 5px;
        /* border: 1px solid red; */
    }

    .el-form {
        /* height: 250px; */
        padding: 0 500px 0 20px;
        background: #fff;
        /* border: 1px solid red; */
    }

    .v-md-editor {
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .but-box {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 1px solid red; */
    }

    .el-button {
        /* margin-top: 15px; */
        padding: 0 10px;
        /* margin-bottom: 15px; */
        background: #51B37F;
    }
</style>